﻿@page "/GridFilterRow"
@inject WeatherForecastService ForecastService
@layout DataProviderAccessArea<ICountryNamesProvider>
@inject ICountryNamesProvider CountryNamesService


<div class="demo-description mw-1100">
    <h2>Data Grid - Filter Row</h2>
    <p>
        Enable the <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.ShowFilterRow">ShowFilterRow</a> option to display a row that allows users to <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1#filter-data">filter grid data</a>. This row displays different in-place editors based on the column types. Users can filter data as follows:
    </p>
    <ul>
        <li>
            <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridDateEditColumn">DxDataGridDateEditColumn</a> (Order Date) - Select a date from the drop-down calendar or type a date in the editor and press Enter.
        </li>
        <li>
            <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridComboBoxColumn-1">DxDataGridComboBoxColumn</a> (Ship Country) - Select an item from the drop-down list or type text into an editor to filter its items on-the-fly.
        </li>
        <li>
            <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridSpinEditColumn">DxDataGridSpinEditColumn</a> (Unit Price) - Click spin buttons or type a value in the editor and press Enter.
        </li>
        <li>
            <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridColumn">DxDataGridColumn</a> (Product) - Type text in the editor and press Enter.
        </li>
        <li>
            <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridCheckBoxColumn">DxDataGridCheckBoxColumn</a> (Order Status) - Select an item from the drop-down list. The <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridCheckBoxColumn.FilterTextChecked">FilterTextChecked</a>, <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridCheckBoxColumn.FilterTextUnchecked">FilterTextUnchecked</a>, and <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridCheckBoxColumn.FilterTextIndeterminate">FilterTextIndeterminate</a> properties specify item captions.
        </li>
    </ul>
    <p>
        Each editor contains a clear button. Use <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridCommandColumn">DxDataGridCommandColumn</a> to add a button that clears values from all the editors.
    </p>
</div>

@if (Orders == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <DxDataGrid Data="@Orders"
                ShowFilterRow="true"
                CssClass="mw-1100">
        <DxDataGridDateEditColumn Field="@nameof(Order.OrderDate)"
                                  DisplayFormat="D"
                                  Width="240px">
        </DxDataGridDateEditColumn>
        <DxDataGridComboBoxColumn Field="@nameof(Order.CountryId)"
                                  Caption="Ship Country"
                                  Data="@Countries"
                                  ValueFieldName="@nameof(Country.Id)"
                                  TextFieldName="@nameof(Country.CountryName)"
                                  FilteringMode="DataGridFilteringMode.Contains"
                                  Width="250px">
        </DxDataGridComboBoxColumn>
        <DxDataGridSpinEditColumn Field="@nameof(Order.UnitPrice)"
                                  DisplayFormat="c"
                                  Width="120px">
        </DxDataGridSpinEditColumn>
        <DxDataGridColumn Field="@nameof(Order.Product)">
        </DxDataGridColumn>

        <DxDataGridCheckBoxColumn Field="@nameof(Order.OrderStatus)"
                                  FilterTextChecked="Delivered"
                                  FilterTextUnchecked="Processing"
                                  FilterTextIndeterminate="In transit"
                                  ValueChecked="@OrderStatus.Delivered"
                                  ValueUnchecked="@OrderStatus.Processing"
                                  ValueIndeterminate="@OrderStatus.InTransit"
                                  Caption="Order Status">
        </DxDataGridCheckBoxColumn>
        <DxDataGridCommandColumn NewButtonVisible="false"
                                 EditButtonVisible="false"
                                 DeleteButtonVisible="false"
                                 Width="70px">
        </DxDataGridCommandColumn>
    </DxDataGrid>

    <CodeSnippet_Grid_FilterRow></CodeSnippet_Grid_FilterRow>

}
@code {
    IEnumerable<Order> Orders;
    IEnumerable<Country> Countries;

    protected override async Task OnInitializedAsync()
    {
        Countries = await CountryNamesService.LoadAsync();
        Orders = await OrderRepository.Load();
    }
}
